<template>
    <section class="product-car-box" >
      <van-checkbox-group v-model="result">
        <div class="box bgcFFF" v-for="(item,index) in carList" :key="index" clickable @click="handleCheckbox(index)">
          <van-row>
            <van-col span="2">
              <span class="radio-box pr"
                    @click.stop="handleCheckbox(index)">
                <van-checkbox
                  :name="item.id"
                  :key="item.id"
                  ref="checkboxes"
                ></van-checkbox>
                <span class="pa"></span>
              </span>
            </van-col>
            <van-col span="5">
              <img @click.stop="handleProdutDetail(item.id)" :src="item.src" alt="">
            </van-col>
            <van-col span="17">
              <div class="msg pr" @click.stop="handleProdutDetail(item.id)">
                <p class="clamp1" >{{item.name}}</p>
                <p>规格型号 {{item.model}}</p>
                <p class="colorF54E4E pa">
                  ￥{{item.price}}
                  <span class="set-num flr">
                    <i class="iconfont" @click.stop="handleMinus(item)">-</i>
                    <i class="iconfont color45454D">{{item.number}}</i>
                    <i class="iconfont" @click.stop="handleAdd(item)">+</i>
                  </span>
                </p>
              </div>
            </van-col>
          </van-row>
        </div>
      </van-checkbox-group>
    </section>
</template>

<script type="text/ecmascript-6">
  export default {
    data() {
      return {
        result:[],//默认选中的商品id
        resultList:[],//返回选中数组
      }
    },
    props:['carList','checkedAll'],
    watch:{
      'checkedAll':function(newVal,oldVal){
        this.result = newVal.length > 0 ? this.checkedAll : [];
        this.$emit('send-editor',{resultList:this.result})
      },
    },
    created(){

    },
    methods: {
      //选择商品
      handleCheckbox(index){
        this.$refs.checkboxes[index].toggle();
        this.$emit('send-editor',{resultList:this.result})
      },
      //减
      handleMinus(item){
        this.$emit('send-minus',{item:item})
      },
      //加
      handleAdd(item){
        this.$emit('send-add',{item:item})
      },
      //跳转商品详情页
      handleProdutDetail(id){
        this.$emit('send-product-id',{id:id})
      },
    },
  }
</script>

<style scoped lang="scss">
  @import '../assets/css/base';

  .product-car-box{

    .box{
      padding:12px 15px;
      box-sizing: border-box;
      margin-top: 10px;

      .van-row{
        height: 80px;

        .van-col{
          height: 100%;
        }

        .radio-box{
          display: flex;
          align-items: center;
          height: 80px;

          span{
            top:0;
            left:0;
            width: 100%;
            height: 100%;
            z-index:10;
            opacity: 0;
          }
        }

        img{
          width: 80px;
          height: 80px;
          vertical-align: top;
        }

        .msg{
          height: 100%;
          padding-left: 10px;
          box-sizing: border-box;
          font-size: 14px;

          p:nth-child(2){
            font-size: 12px;
            color: #999AA3;
          }

          p:last-child{
            bottom:0;
            left:10px;
            width: 100%;
            height: 28px;
            line-height: 36px;

            span.set-num{
              display: inline-block;
              margin-right: 15px;
              height: 28px;
              font-size: 0;
              text-align: center;

              i{
                font-size: 14px;
                display: inline-block;
                width: 28px;
                line-height: 28px;
                border:1px solid #C5C5CC;
                color: #757575;
              }

              i:first-child{
                border-top-left-radius: 2px;
                border-bottom-left-radius: 2px;
              }

              i:nth-child(2){
                min-width: 36px;
                margin-left: -1px;
              }

              i:last-child{
                border-top-right-radius: 2px;
                border-bottom-right-radius: 2px;
                margin-left: -1px;
              }
            }
          }
        }
      }
    }
  }

  @media screen and (min-width:321px) and (max-width: 375px){
    .van-col--5{
      width: 25% !important;
    }

    .van-col--17{
      width: 66.66666667% !important;
    }

    .product-car-box .box .van-row .msg{
      padding-left: 2px;
    }
  }
</style>
